import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
    TextInput,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell} from 'react-native-table-component';
import mockData from './mockData'
import Pangitor from '../../routes/Pangitor'
import ModalDropdown from 'react-native-modal-dropdown';
const undoBtn = (magicArg, preStatus, type, title, fn, getTaskId, taskId, cleanData,signInStatus,signOutStatus) => {
  return (
    <View style={{flexDirection: 'row', justifyContent: 'center'}}>
      <TouchableOpacity onPress={fn}>
        <View style={styles.btnContainer}>
          <Text style={[styles.btn,
            preStatus === '1' ?
            type === '1' ? styles.finished : styles.unfinished : styles.unUse
          ]}>
            {title}
          </Text>
        </View>
      </TouchableOpacity>
      {
        title.slice(1) === '签到' ?
          <TouchableOpacity onPress={
              signOutStatus !== '1' && magicArg && type ==='1'?
                              () => {
                                       cleanData()
                                       getTaskId(taskId)
                                       Actions.push('RectifyBill')}: () => console.log('')
            } style={{marginLeft: 10}}
          >
            <View style={styles.btnContainer}>
              <Text style={[styles.btn,
                type === '1' ? magicArg ? styles.unfinished:styles.finished:  styles.unUse
            ]}>
                {
                  magicArg ? '下发整改单'　: '已下发整改单'
                }
              </Text>
            </View>
          </TouchableOpacity>
          :
          null
      }
    </View>
  )
}

export default class List extends Component<{}> {

  render() {

    const {pageSize,last,page,list, query, getTaskId,cleanData,prjname,selectRowData,thisTextChange,search} = this.props
    const actions = [
      query,
      (val) => {
        cleanData()
        getTaskId(val.taskId)
        Actions.push('SignIn')
      },
      (val) => {
        cleanData()
        getTaskId(val.taskId)
        Actions.push('SignOut')
      },
    ]

    let tableData = list.map((val, index) => {
      val = val.map((value, index2) => {
        if (index2 > 3) {
          return undoBtn(
            val[3],
            value.preStatus,
            value.status,
            value.value,
              value.preStatus ==='1' && value.status !=='1'? () => actions[index2 - 4]({
                taskId: val[0],
                // taskNum: val[1],
                taskName: val[1],
              }) : () => console.log('Boom!!!'),
            getTaskId, val[0], cleanData,value.signIn,value.signOut)
        }
        return value
      })
        let tmp = [pageSize*(page-1)+index + 1].concat(val.slice(1))
        tmp = tmp.slice(0, 3).concat(tmp.slice(4))
        return tmp
    })

    return (
      <ScrollView style={styles.container}>
          <View style={{flexDirection:'row',alignItems:'center',marginBottom:10}}>
              <ModalDropdown style={styles.selectBt} textStyle={{fontSize:18}} defaultValue={'选择接收状态'}
                             options={['已接收','未接收']}
                             renderButtonText = {(rowData) =>{selectRowData(rowData)}}
                             dropdownStyle={{marginTop:6}} dropdownTextStyle={{fontSize:18}}/>

              <View style={{flex:10,height:50,borderWidth:1,borderColor:Colors.btnPrimaryBg}}>
                  <TextInput underlineColorAndroid='transparent' style={{paddingRight:0}}
                             value={prjname}
                             placeholder={'请输入任务名称...'}
                             onChangeText={(val) =>{thisTextChange(val)}}/>
              </View>
              <View style={styles.searchBt}>
                  <Text style={{fontSize:25,color:'white'}} onPress={() =>{search()}}>搜索</Text>
              </View>
          </View>
        {
          tableData.length > 0 ?
            <View>
              <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                {/*1, 2.5,3, 4, 2, 4.5, 2*/}
                <Row data={mockData.tableHead} flexArr={[1,5,3,2, 4.5, 2]} style={styles.head} textStyle={styles.text}/>
                <TableWrapper style={{flexDirection: 'row'}}>
                  <Rows data={tableData} flexArr={[1, 5,3, 2, 4.5, 2]} style={styles.row} textStyle={styles.itemText}/>
                </TableWrapper>
              </Table>
              {/*分页控件，只需要传四个参数：mainFunction = 请求列表的方法名字，namespace = 当前namespace ， currentPage = 当前页码， totalPage= 总页数*/}
              <Pangitor mainFunction={'queryTasks'} namespace={'tasksList'} currentPage={page} totalPage={last} />
            </View>:
            <Text style={{paddingTop:200,textAlign:'center',fontSize:20}}>暂无相关内容</Text>
        }


      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {paddingLeft: 20, paddingRight: 20, marginBottom: 30},
  text: {textAlign: 'center', color: '#fff', fontSize: 22,},
  itemText: {textAlign: 'center', fontSize: 19,},
  row: {height: 48, backgroundColor: '#fff'},

  btnContainer: {alignItems: 'center'},
  btn: {
    height: 28, paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
    alignItems: 'center', color: '#fff', textAlign: 'center', borderRadius: 7, fontSize: 18,
  },
  finished: {color: Colors.btnPrimaryBg, borderColor: Colors.btnPrimaryBg, borderWidth: 1},
  unfinished: {backgroundColor: Colors.btnPrimaryBg,},
  unUse: {backgroundColor: Colors.unselectGrayBg,},

  btnText: {textAlign: 'center', color: '#fff', fontSize: 22},
  head: {height: 50, backgroundColor: Colors.navbarBackground,},
  title: {flex: 1, backgroundColor: '#f6f8fa'},
  fenye: {
        height: 35,
        paddingBottom: 2,
        paddingLeft: 25,
        paddingRight: 25,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 25
    },
    surJ: {
        marginLeft:10,
        height: 35,
        paddingTop:5,
        paddingBottom: 2,
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 18
    },
    searchBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:8,
        paddingBottom:8,
        // paddingLeft:5,
        borderBottomRightRadius:5,
        borderTopRightRadius:5,
        flex:2
    },
    selectBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:14,
        paddingBottom:14,
        // paddingLeft:18,
        borderBottomLeftRadius:5,
        borderTopLeftRadius:5,
        flex:2,
        marginRight:20
    },
});